<template>
	<div class="echarts1">
		<div style="width: auto; height: 470px" id="echarts1"></div>
	</div>
</template>

<script>
const colors = ["rgb(59 94 161)"]

export default {
	name: "FronteCharts1",
	data() {
		return {
			option: {
				color: colors,
				tooltip: {
					trigger: "none",
					axisPointer: {
						type: "cross",
					},
				},
				legend: {},
				grid: {
					top: 70,
					bottom: 50,
				},
				xAxis: {
					type: "category",
					axisTick: {
						alignWithLabel: true,
					},
					axisLine: {
						onZero: false,
						lineStyle: {
							color: colors[0],
						},
					},
					axisPointer: {
						label: {
							formatter: function (params) {
								return (
									"用户数" +
									params.value +
									(params.seriesData.length
										? "：" + params.seriesData[0].data
										: "")
								)
							},
						},
					},
					data: this.xData,
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						data: this.data,
						smooth: true,
						type: "line",
					},
				],
			},
			chart: null,
		}
	},
	props: {
		data: {
			type: Array,
			default: () => [],
		},
		xData: {
			type: Array,
			default: () => [],
		},
	},
	watch: {
		data: {
			handler(nv, ov) {
				if (nv.length > 0) {
					this.option.series[0].data = nv
				} else {
					this.option.series[0].data = ov
				}
				this.chart.setOption(this.option)
			},
			deep: true,
		},
		xData: {
			handler(nv, ov) {
				if (nv.length > 0) {
					this.option.xAxis.data = nv
				} else {
					this.option.xAxis.data = ov
				}
				this.chart.setOption(this.option)
			},
			deep: true,
		},
	},
	mounted() {
		this.chartInit()
	},
	methods: {
		chartInit() {
			if (this.chartInit) {
				this.chart = this.$echarts.init(document.getElementById("echarts1"), "vintage")
				this.chart.setOption(this.option, true)
				this.chart.resize()
			}
		},
	},
}
</script>

<style scoped></style>
